<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <base th:href="@{/}" />
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Daxone - eCommerce Bootstrap 4 Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

    <!-- CSS
	============================================ -->
    <!--layui CSS-->
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/line-awesome.css">
    <link rel="stylesheet" href="assets/css/vendor/themify.css">
    <!-- othres CSS -->
    <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/owl-carousel.css">
    <link rel="stylesheet" href="assets/css/plugins/slick.css">
    <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/plugins/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        #thumbnailsPreview image{
            width: 300px;
            height: 300px;
        }
    </style>

</head>

<body>
<!--服务名相关url：js-->
    <div class="main-wrapper">
        <div th:include="headerfooter :: header"></div>
        <div class="product-details-area pt-90 pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="layui-upload">
                            <label for="cover" class="layui-btn">上传封面</label>
                            <input id="cover" type="file" style="display:none">

                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="coverPreview"></div>
                            </blockquote>
                        </div>
<!--                        <div class="layui-upload">-->
<!--                            <label for="thumbnails" class="layui-btn">上传缩略图</label>-->
<!--                            <input id="thumbnails" type="file" multiple="multiple" style="display:none">-->
<!--                            <label for="cleanThumbnails" class="layui-btn">清空</label>-->
<!--                            <input id="cleanThumbnails" type="button" style="display:none">-->
<!--                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->
<!--                                预览图：-->
<!--                                <div class="layui-upload-list" id="thumbnailsPreview"></div>-->
<!--                            </blockquote>-->
<!--                        </div>-->
                    </div>
                    <!--                    文本信息区域-->
                    <div class="col-lg-6 col-md-6">
                        <input type="hidden" id="gid" name="gid">
                        <form  class="layui-form layui-form-pane" id="goodForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品类型</label>
                                <div class="layui-input-inline">
                                    <select name="goodType" id="goodType" lay-verify="required">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">起拍价</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="startPrice" lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">请输入正整数</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">保证金</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="buyerBond" lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">请输入正整数</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">加价幅度</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="rangePrice" lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">请输入正整数</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">保留价</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="reservePrice" lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">请输入正整数</div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">日期选择</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input" lay-verify="required">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">注：拍卖整点开场，请选择当前时间一个小时后开拍，同时为审核预留时间</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">拍卖时长</label>
                                <div class="layui-input-inline">
                                    <select name="durationTime" lay-filter="durationTime" lay-verify="required">
                                        <option value="1" selected="">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                    </select>
                                </div>
                                <div class="layui-form-mid layui-word-aux">小时</div>
                            </div>

                            <div class="layui-form-item">
                                <button class="layui-btn" lay-submit="" lay-filter="goodSubmit" id="goodSubmit">商品提交</button>
                            </div>
                        </form>
                        <div class="layui-form-item">
                            <p class="text-warning">请注意，商品信息提交后方可上传图片</p>
                        </div>
                        <button class="layui-btn" id="fileSubmit" style="display:none">提交图片</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品描述开始 -->
        <div class="description-review-wrapper pb-90">
            <div class="container">
                <div class="row">
                    <div class="ml-auto mr-auto col-lg-10">
                        <div class="dec-review-topbar nav nav-tabs mb-40">
                            <a class="active" data-toggle="tab" href="#des-details1">拍品上传</a>
                        </div>
                        <div class="tab-content dec-review-bottom">
                            <div id="des-details1" class="tab-pane active">
<!--                                <div>-->
<!--                                    <div class="section-title-2 text-center mt-40">-->
<!--                                        <h2>实物拍摄</h2>-->
<!--                                    </div>-->
<!--                                    <div class="layui-upload">-->
<!--                                        <button type="button" class="layui-btn" id="showVideo" name="showVideo">视频上传</button>-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="text-center" style="margin-top: 30px; width: 100%; height: auto;">
                                    <div class="section-title-2">
                                        <h2>拍品展示</h2>
                                    </div>
                                    <div class="layui-upload">
                                        <label for="showImages" class="layui-btn">上传展示图片</label>
                                        <input id="showImages" type="file" multiple="multiple" style="display:none">
                                        <label for="cleanShowImages" class="layui-btn">清空</label>
                                        <input id="cleanShowImages" type="button" style="display:none">
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list" id="showImagesPreview"></div>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:include="headerfooter :: footer"></div>
    </div>


    <!-- JS
============================================ -->
    <!--layui JS-->
    <script src="assets/layui/layui.js"></script>
    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- Modernizer JS -->
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="assets/js/vendor/popper.js"></script>
    <!-- Bootstrap JS -->
    <script src="assets/js/vendor/bootstrap.min.js"></script>

    <!-- Slick Slider JS -->
    <script src="assets/js/plugins/countdown.js"></script>
    <script src="assets/js/plugins/counterup.js"></script>
    <script src="assets/js/plugins/images-loaded.js"></script>
    <script src="assets/js/plugins/isotope.js"></script>
    <script src="assets/js/plugins/instafeed.js"></script>
    <script src="assets/js/plugins/jquery-ui.js"></script>
    <script src="assets/js/plugins/jquery-ui-touch-punch.js"></script>
    <script src="assets/js/plugins/magnific-popup.js"></script>
    <script src="assets/js/plugins/owl-carousel.js"></script>
    <script src="assets/js/plugins/scrollup.js"></script>
    <script src="assets/js/plugins/waypoints.js"></script>
    <script src="assets/js/plugins/slick.js"></script>
    <script src="assets/js/plugins/wow.js"></script>
    <script src="assets/js/plugins/textillate.js"></script>
    <script src="assets/js/plugins/elevatezoom.js"></script>
    <script src="assets/js/plugins/sticky-sidebar.js"></script>
    <script src="assets/js/plugins/smoothscroll.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
    <script>
        var preurl = "/good/";
        $(function () {
            layui.use(['form', 'laydate', 'upload','jquery'], function(){
                var form = layui.form
                    ,layer = layui.layer
                    ,layedit = layui.layedit
                    ,laydate = layui.laydate
                    ,upload = layui.upload;

                //日期
                laydate.render({
                    elem: '#startTime'
                    ,calendar: true
                    ,type: 'datetime'
                    ,format: 'yyyy-MM-dd HH:00:00'
                    ,btns: ['clear', 'confirm']
                    ,min: (new Date()+3600*1000).toLocaleString()
                });

                //自定义验证规则
                form.verify({
                    title: function(value){
                        if(value.length < 3){
                            return '标题需要不少于3个字符';
                        }
                    }
                    ,startPrice: [
                        /^[1-9]\d*$/
                        ,'请输入正整数'
                    ]
                    ,buyerBond: [
                        /^[1-9]\d*$/
                        ,'请输入正整数'
                    ]
                    ,rangePrice: [
                        /^[1-9]\d*$/
                        ,'请输入正整数'
                    ]
                    ,reservePrice: [
                        /^[1-9]\d*$/
                        ,'请输入正整数'
                    ]
                    ,goodType: [
                        /^[1-8]$/
                        ,'请选择类型'
                    ]
                });

                //封面单图片上传
                upload.render({
                    elem: '#cover'
                    ,multiple: false //允许多文件
                    ,accept: 'images' //只接收图片
                    ,size: 10240 //限制文件大小，单位 KB
                    ,choose: function(obj){
                        $('#coverPreview').html("");
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#coverPreview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 300px;height: 300px;">')
                        });
                    }
                    ,auto: false //关闭自动上传
                });
                //缩略图处多图片上传
                /*upload.render({
                    elem: '#thumbnails'
                    ,multiple: true //允许多文件
                    ,number: 5
                    ,accept: 'images' //只接收图片
                    ,size: 1024 //限制文件大小，单位 KB
                    ,choose: function(obj){
                        var files = this.files;
                        $("#cleanThumbnails").click(function () {
                            delete files;
                            $('#thumbnailsPreview').html("");
                        });

                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#thumbnailsPreview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 300px;height: 300px;">')
                        });
                    }
                    ,auto: false //关闭自动上传
                });*/
                //展示处多图片上传
                upload.render({
                    elem: '#showImages'
                    ,multiple: true //允许多文件
                    ,number: 5
                    ,accept: 'images' //只接收图片
                    ,size: 1024 //限制文件大小，单位 KB
                    ,choose: function(obj){
                        var files = this.files;
                        $("#cleanShowImages").click(function () {
                            delete files;
                            $('#showImagesPreview').html("");
                        });
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#showImagesPreview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                        });
                    }
                    ,auto: false //关闭自动上传
                });
                //视频上传
                // upload.render({
                //     elem: '#showVideo'
                //     // ,url: '/upload/'
                //     ,multiple: true //允许多文件
                //     ,accept: 'video' //只接收图片
                //     // ,data:{gid:$("#gid").val()}
                //     ,size: 102400 //限制文件大小，单位 KB
                //     ,auto: false //关闭自动上传
                //     ,bindAction: '#fileSubmit'
                // });

                //监听提交
                form.on('submit(goodSubmit)', function(data){
                    $.post(
                        preurl+"doupload",data.field,function (result) {
                            if(result.code==0){
                                $("#gid").val(result.gid);
                                $("#fileSubmit").show();
                                $("#goodSubmit").hide();
                                alert("商品信息上传成功，可以继续上传图片或前往其他页面");
                            }else{
                                alert(result.message);
                            }
                        }
                    );
                    return false;
                });
            });
            //显示商品类型列表
            $.get(
                preurl+"typelist",null,function(data){
                    var content = "";
                    $.each(data,function(index,obj){
                        content += "<option value='"+obj.gtid+"'>"+obj.title+"</option>";
                    });
                    $("#goodType").html(content);
                }
            );
            //提交文件
            $("#fileSubmit").click(function () {
                var formData = new FormData();
                var gid = $("#gid").val();
                if (gid == null){
                    alert("商品信息还未上传成功");
                    return;
                }else {
                    formData.append("gid",gid);
                }
                layui.layer.load();//等待悬浮框
                var cover = $("#cover")[0].files[0];
                // var thumbnails = $("#thumbnails")[0].files;
                var showImages = $("#showImages")[0].files;
                if(cover!=null){
                    formData.append("cover",cover);
                }
                /*if(thumbnails!=null){
                    $.each(thumbnails,function(index,obj){
                        formData.append("thumbnails",obj);
                    });
                }*/
                if(showImages!=null){
                    $.each(showImages,function(index,obj){
                        formData.append("showImages",obj);
                    });
                }

                $.ajax({
                    url: preurl+"fileupload",
                    type: "post",
                    data: formData,
                    processData: false,//重要
                    contentType: false,//重要
                    success: function (data){
                        layui.layer.closeAll('loading'); //关闭loading
                        $("#fileSubmit").hide();
                        if(data.success != null && data.success != ""){
                            alert(data.success);
                        }
                        if(data.message != null){
                            alert(data.message);
                        }
                    },
                    error: function () {
                        layui.layer.closeAll('loading'); //关闭loading
                        alert("网络异常");
                    }
                });
            });

        });

    </script>
	

</body>

</html>